<template>
  <el-row justify="center" align="middle" style="min-height: calc(100% - 60px);">
    <el-col :span="12" :offset="6">
      <el-row style="margin-bottom: 50px">
        <el-col :span="24">
          <ItemWrap box-name="dv-border-box10" :title="form.deviceName+'设置'" style="height: 650px;width: 940px;">
            <el-form ref="setupParams" :model="form" :rules="rules" label-width="200px" size="large" style="margin-top: 50px">
              <el-form-item label="LED文字颜色:" prop="color" size="large" style="margin-bottom: 50px">
                <span style="font-size: 20px;margin-right: 20px" :style="{color: textStyle.color}">{{ textStyle.label }}</span>
                <el-button size="large" v-for="(item,index) in colors" :key="index" :color="item.color" @click="changeColor(item)">{{ item.label }}</el-button>
              </el-form-item>
              <el-form-item label="LED显示内容:" prop="color" size="large" style="margin-bottom: 50px">
                <el-checkbox-group v-model="form.checkContents" size="large">
                  <el-checkbox-button v-for="(item,index) in contents" :key="index" :label="item.value" >{{ item.label }}</el-checkbox-button>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="密度设定:" prop="color" size="large" style="margin-bottom: 50px">
                <el-input class="scale-top-left__input" style="height: 100%;width: 80%;"
                          :formatter="(value) => value.replace(/^\D*([0-9]\d*\.?\d{0,5})?.*$/,'$1')"
                          :parser="(value) => value.replace(/^\D*([0-9]\d*\.?\d{0,5})?.*$/,'$1')"
                          v-model="form.density" >
                  <template #append>吨/立方米</template>
                </el-input>
              </el-form-item>
           </el-form>
            <el-row style="margin-bottom: 50px">
              <el-col :span="16">
                <el-button :disabled="loading" style="margin-left: 200px" color="#0080FF" type="primary" @click="submit" size="large">提 交</el-button>
              </el-col>
              <el-col :span="8">

              </el-col>
            </el-row>

            <el-divider />

            <div style="text-align: center;font-size: 25px;font-weight: 400;color: orange">
              累积量清零将清除全部历史数据，请谨慎操作！
            </div>
            <el-row style="margin-top:30px;margin-bottom: 50px">
              <el-col :span="16">
                <el-button style="margin-left: 200px" color="#ff0000" type="danger" @click="resetFlow" size="large">累积量清零</el-button>
              </el-col>
              <el-col :span="8">

              </el-col>
            </el-row>
          </ItemWrap>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="6">
    </el-col>
  </el-row>

</template>

<script lang="ts" setup>
import {GET, PUT} from '@/api'
import {ElMessageBox} from "element-plus";

const form = ref({
  deviceName: '',
  color: '',
  density: '',
  checkContents: [],
})
const rules = ref({})
const loading = ref(false);

const contents = ref([
  {
    value: 3,
    label: '早班'
  },
  {
    value: 4,
    label: '中班'
  },
  {
    value: 5,
    label: '晚班'
  },
  {
    value: 6,
    label: '本日'
  },
  {
    value: 7,
    label: '本月'
  },
  {
    value: 8,
    label: '本年'
  },
  {
    value: 9,
    label: '全部'
  },
])

const textStyle = ref({
  color: '',
  label: '',
  value: '',
})

const colors = ref([
  {
    color: '#fafa37',
    label:'黄色',
    value:'3'
  },
  {
    color: '#ff0000',
    label:'红色',
    value:'1'
  },
  {
    color: '#00ff00',
    label:'绿色',
    value:'2'
  },
  {
    color: '#0080FF',
    label:'蓝色',
    value:'4'
  },
  {
    color: '#800080',
    type: 'warning',
    label:'紫色',
    value:'5'
  },
  {
    color: '#00FFFF',
    label:'青色',
    value:'6'
  },
  {
    color: '#ffffff',
    label:'白色',
    value:'7'
  }
])

const scale = ref({ id: null, deviceType: '', deviceConfig: '', density: ''})
const led = ref({ id: null, deviceType: '', deviceConfig: '' })

onMounted(()=>{
  GET('getLEDInfo',{}).then(resp => {
    form.value.deviceName = resp.scale.deviceName
    scale.value.id = resp.scale.id
    scale.value.deviceType = resp.scale.deviceType
    led.value.id = resp.led.id
    led.value.deviceType = resp.led.deviceType
    form.value.density = resp.scale && resp.scale.density ? resp.scale.density : '0.00000'
    let color = resp.led && resp.led.deviceConfig ? JSON.parse(resp.led.deviceConfig).color : '1'
    changeColor(getColor(color))
    form.value.checkContents = resp.led && resp.led.deviceConfig ? JSON.parse(resp.led.deviceConfig).contents : []
  })
})

onMounted(()=>{
  textStyle.value = {
    color: '#ff0000',
    label: '红色',
    value: '1'
  }
})

function changeColor(value){
  form.value.color = value.value
  textStyle.value = value
}

const getColor = (color) => {
  return colors.value.filter( item=> item.value === color)[0]
}

const submit = ()=>{
  if (!form.value.density){
    Window.$message({
      message: '请填写密度',
      type: "warning",
    })
  } else {
    loading.value = true;
    let scaleDeviceConfig = { density: form.value.density }
    scale.value.deviceConfig = JSON.stringify(scaleDeviceConfig)
    scale.value.density = form.value.density
    let ledDeviceConfig = { color: form.value.color, contents: form.value.checkContents.sort() }
    led.value.deviceConfig = JSON.stringify(ledDeviceConfig)
    let deviceArray = [scale.value,led.value]
    PUT('setupDeviceInfo',deviceArray).then(resp => {
      Window.$message({
        message: '修改成功',
        type: "success",
      })
      loading.value = false
    }).catch( e=> {
      loading.value = false
    })
  }
}
const resetFlow = () => {
  ElMessageBox.confirm(
      '点击确认将初始化皮带秤全部累计数据，是否确认将累积量清零?',
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    GET('resetScale',{}).then(resp => {
      if (resp.code === 200) {
        Window.$message({
          type: 'success',
          message: '累积量清零已完成'
        })
      } else {
        Window.$message({
          type: 'error',
          message: resp.msg
        })
      }
    })
  }).catch(() => {
      Window.$message({
        type: 'info',
        message: '累积量清零已取消',
      })
  })
}
</script>

<style scoped lang="scss">
:deep(.el-form-item__label) {
  color: #FFFFFF;
  font-weight: 800;
  font-size: 20px;
}
</style>